import React from 'react';
import { history } from 'umi'
import moment from 'moment';
import ReactEcharts from '@/components/Echarts';

const QualityBar = ({ data = [], query = {}, flagField }) => {
    console.log(data);
    const { companyId = 101, reportType = 1, dateType = 1 } = query;
    const finalxAxisData = data.map(item => item.name);
    const finalData = data.map(item => ({
        ...item,
        value: item.num
    }));

    const format = 'YYYY-MM-DD';

    // 太赶没时间优化，随便写了。。。。。
    // 本周本月
    let startDate = moment()
        .week(moment().week())
        .startOf('week')
        .format(format);

    let endDate = moment()
        .week(moment().week())
        .endOf('week')
        .format(format);

    if (reportType === 2) {
        startDate = moment()
            .month(moment().month())
            .startOf('month');
        endDate = moment()
            .month(moment().month())
            .endOf('month')
            .format(format);
    }

    if (dateType === 2) {
        // 上周、上月
        startDate = moment()
            .week(moment().week() - 1)
            .startOf('week')
            .format(format);
        endDate = moment()
            .week(moment().week() - 1)
            .endOf('week')
            .format(format);
        if (reportType === 2) {
            startDate = moment()
                .month(moment().month() - 1)
                .startOf('month');
            endDate = moment()
                .month(moment().month() - 1)
                .endOf('month')
                .format(format);
        }
    }

    const handleChartClick = ({ name }) => {
        const map = { 正常: 1, 不足: 2, 超额: 3 };
        const link = `/stat/workStat/workOverview/work/employee?companyId=${companyId}&reportType=${reportType}&${flagField}=${map[name]}&startDate=${startDate}&endDate=${endDate}`;
        history.push(link);
    };

    return (
        <ReactEcharts
            onEvents={{ click: handleChartClick }}
            style={{ height: '200px', width: '100%' }}
            option={{
                color: ['#ffa22d'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: finalxAxisData,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        axisLabel: {
                            color: 'rgba(0, 0, 0, 0.45)'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: { show: false },
                        axisTick: { show: false }
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '32px',
                        data: finalData
                    }
                ]
            }}
        />
    );
};

export default QualityBar;
